<template>
  <div class="flex-1 card-scroll flex-col flex" border-r="1px solid normal_border">
    <div border-b="1px solid  light_border" class="h-56 flex items-center px-10">
      <a-row :gutter="20" type="flex">
        <a-col flex="1">
          <a-input placeholder="搜索" v-model:value="keywords">
            <template #prefix>
              <SearchOutlined></SearchOutlined>
            </template>
          </a-input>
        </a-col>
        <a-col>
          <a-button type="primary" @click="formEl?.onOpen('add')">
            <template #icon>
              <PlusOutlined></PlusOutlined>
            </template>
            新增
          </a-button>
        </a-col>
      </a-row>
    </div>
    <div class="p-12 overflow-y-auto">
      <a-spin :spinning="loading">
        <a-list size="small" item-layout="horizontal" :data-source="searchResult" :split="false">
          <template #renderItem="{ item }">
            <a-list-item
              :class="item.code === currentDict ? 'bg-#e6f4ff' : ''"
              :un-hover="item.code === currentDict ? '' : 'bg-#0000000a'"
              @click="onSelect(item)"
              class="rounded-2xl"
            >
              <div class="cursor-pointer flex-1">【{{ item.code }}】{{ item.name }}</div>
              <div slot="actions" v-if="item.code === currentDict">
                <a key="list-loadmore-edit" @click="onEdit(item)"><EditOutlined /></a>
                <a-divider type="vertical"></a-divider>
                <a key="list-loadmore-more" @click="onDelete(item)"><DeleteOutlined /></a>
              </div>
            </a-list-item>
          </template>
        </a-list>
        <DictForm ref="formEl" type="字典" @add="onAdd" @update="onUpdate"></DictForm>
      </a-spin>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PlusOutlined, SearchOutlined } from '@ant-design/icons-vue'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import DictForm from '@/views/system/dict/components/dict-form.vue'
import dictApi, { DictDto } from '@/api/dict.ts'
import { onMounted } from 'vue'
import { message, Modal } from 'ant-design-vue'

const props = defineProps<{
  currentDict: string | null
}>()
const formEl = ref()
const emits = defineEmits(['update:currentDict'])
const onSelect = (item: DictDto) => {
  if (item.code !== props.currentDict) {
    emits('update:currentDict', item.code)
  }
}
const keywords = ref<string>()
const loading = ref<boolean>(false)
const dictList = ref<Array<DictDto>>([])
const searchResult = computed(() => {
  return keywords.value
    ? dictList.value.filter(
        (item) => item.code!.includes(keywords.value!) || item.name!.includes(keywords.value!),
      )
    : dictList.value
})
const render = () => {
  loading.value = true
  dictApi.all().then((rep) => {
    dictList.value = rep.data
    loading.value = false
  })
}
const onAdd = (form: DictDto, callback: Function) => {
  dictApi.create(form).then(() => {
    render()
    callback()
  })
}
const onUpdate = (form: DictDto, callback: Function) => {
  dictApi.update(form.code!, form).then(() => {
    render()
    callback()
  })
}
const onEdit = (item: any) => {
  formEl.value?.onOpen('edit', item)
}
const onDelete = (item: DictDto) => {
  Modal.confirm({
    title: '提示',
    type: 'info',
    content: `确认删除【${item.name}】?`,
    onOk() {
      dictApi.delete(item.code!).then(() => {
        emits('update:currentDict', null)
        message.success('删除成功')
        render()
      })
    },
    onCancel() {},
  })
}

onMounted(render)
</script>

<style lang="less" scoped>
::v-deep(.ant-tree .ant-tree-node-content-wrapper .ant-tree-iconEle) {
  line-height: 28px;
}
</style>
